<template>
  <view class="tool-wrap">
    <picker :range="units" :value="fromIdx" @change="e=>fromIdx=e.detail.value">
      <view class="picker">从：{{ units[fromIdx] }}</view>
    </picker>
    <picker :range="units" :value="toIdx" @change="e=>toIdx=e.detail.value">
      <view class="picker">到：{{ units[toIdx] }}</view>
    </picker>
    <input class="ipt" type="number" v-model.number="value" placeholder="输入数值" placeholder-class="ph" />
    <text class="result">结果：{{ converted }}</text>
  </view>
</template>

<script>
export default {
  name: 'UnitConverter',
  data() {
    return {
      units: ['米 m','厘米 cm','千米 km','英寸 in','英尺 ft'],
      toIdx: 0,
      fromIdx: 2,
      value: 1,
    }
  },
  computed: {
    converted() {
      const ratios = { m:1, cm:0.01, km:1000, in:0.0254, ft:0.3048 }
      const code = i => ['m','cm','km','in','ft'][i]
      const m = Number(this.value) * ratios[code(this.fromIdx)]
      const res = m / ratios[code(this.toIdx)]
      return isFinite(res) ? res.toFixed(4) : '-'
    }
  }
}
</script>

<style>
.tool-wrap { display: grid; gap: 12rpx; }
.picker { height: 60rpx; border-radius: 20rpx; padding: 0 20rpx; display: flex; align-items: center; background: rgba(255,255,255,.06); border: 2rpx solid rgba(255,255,255,.12); }
.ipt { height: 64rpx; border-radius: 20rpx; padding: 0 20rpx; color: #e9ecff; background: rgba(255,255,255,.06); border: 2rpx solid rgba(255,255,255,.12); }
.ph { color: #a7b0d9; }
.result { margin-top: 8rpx; font-size: 26rpx; font-weight: 600; }
</style>


